<template>
  <div class="charts-div">
    <p>{{text}}</p>
    <div id="data-charts">
    </div>
  </div>
</template>

<script>
  export default {
    name: "charts",
    props: {
      text: {
        type: String,
        default: '趋势数据',
        require: true
      },
      deviceName: {
        type: String,
        default: '设备名称',
        require: true
      },
      passNum: {
        type: Number,
        default: 0,
        require: true
      },
      xData: {
        type: Array,
        require: true
      },
      data: {
        type: Array,
        require: true
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        let that = this;
        let option = {
          // backgroundColor: '#7790c1',
          title: {
            text: that.deviceName + '月合格指数：' + that.passNum + '%',
            x: 'center',
            y: 'bottom',
            textStyle: {
              // //文字颜色
              // color: '#ccc',
              // //字体风格,'normal','italic','oblique'
              // fontStyle: 'normal',
              // //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
              // fontWeight: 'bold',
              // //字体系列
              // fontFamily: 'sans-serif',
              //字体大小
              fontSize: 14
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false,
            },
            boundaryGap: false,
            axisLabel: {
              color: '#000000',
              fontSize: 10,
              interval: (index, value) => {
                console.log(value);
                return index === 0 || (index + 1) % 5 === 0;
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(12,102,173,.5)',
                width: 1,
              }
            },
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: true,//刻度线
            },
            axisLabel: {
              color: '#000000',  //y轴上的字体颜色,
              fontSize: 10
            },
            axisLine: {
              lineStyle: {
                width: 1,
                color: 'rgba(12,102,173,.5)',//y轴的轴线的宽度和颜色
              }
            },
            splitLine: {
              show: true
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '12%',
            containLabel: true
          },
          series: [
            {
              name: '数值',
              type: 'line',
              smooth: true,
              connectNulls: false,
              stack: '总量',
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#09b0f5'
                  }, {
                    offset: 1,
                    color: 'rgba(216,222,229,0.64)'
                  }])
                }
              },
              color: "rgba(5,132,229,0.5)"
            }
          ]
        };
        option.xAxis.data = this.xData;
        option.series[0].data = this.data;
        var chart3 = this.$echarts.init(document.getElementById('data-charts'));
        chart3.setOption(option);
      }
    },
    watch: {
      xData: function (newvalue, oldvalue) {
        console.log('newvalue' + newvalue)
        console.log('oldvalue' + oldvalue)
        this.drawLine()
      },
      data: function (newvalue, oldvalue) {
        console.log('newvalue' + newvalue)
        console.log('oldvalue' + oldvalue)
        this.drawLine()
      }
    }
  }

</script>

<style scoped>
  #data-charts {
    width: 100%;
    height: 24em;
    top: -2rem; /* 因为文字与图表距离太远 */
  }

  .charts-div {
    width: 100%;
  }

  .charts-div p {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 17px;
    color: #3198FC;
  }
</style>
